<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="/${BasePath}/static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="/${BasePath}/static/css/login.css" media="all" />
<link rel="stylesheet" href="/${BasePath}/static/iconfont/style.css" media="all" />
</head>
<body class="layui-layout-login">
	<div class="cover"></div>
	<div class="login-content">
	    <h1 class="login-box-title"><i class="fa fa-fw fa-user"></i>注册</h1>
	    <form class="layui-form">
	        <div class="layui-form-item">
	            <label class="layui-icon icon-user icon_font" for="username"></label>
	            <input type="text" lay-verify="required" lay-verType="tips" class="layui-input" name="username" id="username" autocomplete="off" placeholder="请输入邮箱" />
	        </div>
	        <div class="layui-form-item">
	            <label class="layui-icon icon-lock icon_font" for="password"></label>
	            <input type="password" lay-verify="required" lay-verType="tips" class="layui-input" name="password" id="password" autocomplete="off" placeholder="请输入密码" />
	        </div>
	        <div class="layui-form-item">
	            <label class="layui-icon icon-lock icon_font" for="password"></label>
	            <input type="password" autocomplete="off" lay-verify="required" lay-verType="tips" class="layui-input" name="passwordSub" id="passwordSub" placeholder="请再次输入密码" />
	        </div>
	        <div class="layui-form-item">
	            <div class="layui-row">
	            	<div class="layui-col-xs8">
	            		<label class="layui-icon icon-custom icon_font" for="code"></label>
	            		<input type="text" lay-verify="required" lay-verType="tips"  class="layui-input" name="code" id="code" placeholder="请输入验证码" />
	            	</div>
	            	<div class="layui-col-xs4">
	            		<div class="codeimg">
	            			<img  class="img" src="/${BasePath}/user/validateCode" alt="" id="imgObj" onclick="changeImg()" />
	            		</div>
	            	</div>
	            </div>
	        </div>
	        <div class="layui-form-item">
	            <a href="/${BasePath}/user/login" class="go-reg">已有账号，去登录</a>
	            <a class="layui-layout-right forget-password" href="/${BasePath}/user/forgetPwd">忘记密码?</a>
	        </div>
	        <button type="button"  class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit lay-filter="form">注册</button>
	    </form>
	</div>
  <script type="text/javascript" src="/${BasePath}/static/js/common/jquery-2.1.0.min.js"></script> 
  <script src="/${BasePath}/static/layui/layui.js" charset="utf-8" type="text/javascript"></script>
  <script type="text/javascript">
  layui.use(['form','layer'],function(){
		var form = layui.form,
		layer = layui.layer;
		form.on('submit(form)',function(data){
			var passwd = $('#password').val();
			var passwd2 = $('#passwordSub').val();
			if(passwd != passwd2){
				layer.msg("两次输入密码不一致");
				return false
			}
			layer.msg('加载中', {
				  icon: 16
				  ,shade: 0.8
				  ,time: false
			});
			$.ajax({
	            type: 'post',
	            url: "/${BasePath}/user/doRegister",
	            data: data.field,
	            dataType: 'json',
	            success: function(data){
	            	if (data.code == "1"){
	                	layer.msg(data.msg,{time:500},function(){
	                		window.location.href="/${BasePath}/user/login"
	                	})
	                	
	                }else{
	                	layer.msg(data.msg);
	                	changeImg();
	                }
	            }
	        });
		})
	})  
	
   // 刷新图片
    function changeImg() {
        var imgSrc = $("#imgObj");
        var src = imgSrc.attr("src");
        imgSrc.attr("src", changeUrl(src));
    }
    //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
    function changeUrl(url) {
        var timestamp = (new Date()).valueOf();
        var index = url.indexOf("?",url);
        if (index > 0) { 
			 url = url.substring(0, index);
			}
        if ((url.indexOf("&") >= 0)) {
            url = url + "×tamp=" + timestamp;
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url;
    }
	</script>  
 </body>
</html>
